<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="script/jquery-1.10.min.js">
// <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">
<!-- <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> -->
<script src="script/bootstrap-3.3.7.min.js"></script>

<script>
$(document).ready(function(){
          //样例数据
    var json_data_ex= {"data": [{"name": "\u6d4b\u8bd5\u4efb\u52a1", "tag": "\u6d4b\u8bd5\u4efb\u52a1\u6807\u7b7e", "create_user": "org", "total_run_count": 36, "create_time": "2018-06-04-15:19", "app_name": "\u4e91\u7ba1\u5e73\u53f0\u73af\u5883", "id": 7, "last_run_time": "2018-06-05 10:23"}], "success": true}

    function table_append(dom,data){
            $.each(data, function(index, obj) { // 通用方法，表格添加数据
        // alert(index +"-"+obj.tagName); index序号,
            $(dom).append("<tr><td>"+index+"</td>\
                   <td>"+obj.name+"</td>\
                   <td>"+obj.tag+"</td>\
                   <td>"+obj.create_user+"</td>\
                   <td>"+obj.total_run_count+"</td>\
                   <td>"+obj.app_name+"</td>\
                   <td>"+obj.create_time+"</td>\
                   <td>"+obj.last_run_time+"</td>\
                   </tr>")
            });

    }

	$("button").click(function(){


    $.ajax({
        type: 'get',
        url: 'http://127.0.0.1:8000/app_center/capsule_list',
    //如果是json data 加入 contentType: 'application/json;charset=utf-8',
        data:    {app_id:1}, //get 参数

        success: function (json_data,status) { //返回json结果
          // alert("数据：" + data + "\n状态：" + status);
          if (json_data.success ){
                table_append(("#t"),json_data.data)
          }
          else{
            alert("请求数据异常,使用样例数据")
            table_append(("#t"),json_data_ex.data)
          }
        },

        error: function (xhr,status) { //返回json结果
          alert("错误数据：" + xhr + "\n 状态：" + status  +"\n 使用样例数据");
          table_append(("#t"),json_data_ex.data)
        }

        });
	});
});
</script>
</head>
<body>

<button>执行按钮</button>
<table id="t">
<th>序号</th>
<th>任务名称</th>
<th>任务标签</th>
<th>创建用户</th>
<th>统计次数</th>
<th>应用名称</th>
<th>创建时间</th>
<th>修改时间</th>
</table>
</body>
</html>
